<template>
  <div class="Refund">
    <!-- 退款 -->
    <div class="filter_container">
      <el-form :inline="true" :model="Refundform" class="demo-form-inline">
        <el-form-item label="城市">
          <el-select v-model="deptIds" size="small" placeholder="请选择城市" multiple @visible-change='citydataList' @change="getdeptIdsIds"
            ref='deptNameRef' @keydown.native="selectBlur($event)">
            <el-option v-for="item in cityList" :key="item.id" size="small" :label="item.deptName" :value="{label:item.deptName,value:item.id}">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="渠道">
          <el-select v-model="channelId" size="small" clearable placeholder="请选择渠道" multiple @visible-change='getChannelList'
            @change="getchannelIds" ref='channelIdRef' @keydown.native="selectBlur($event)">
            <el-option v-for="item in channelList" :key="item.dictKey" size="small" :label="item.dictValue" :value="{label:item.dictValue,value:item.dictKey}">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发起日期">
          <el-date-picker v-model="Launchdate" type="daterange" range-separator="至" start-placeholder="开始日期" :clearable='false'
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain size="small" icon="el-icon-search" @click="handleFilter(Refundform,Launchdate)">查询</el-button>
          <el-button type="success" plain size="small" v-xmbz-permission="'statistics_workorder_refund_export'" icon="el-icon-download" @click="handleExport(Refundform,Launchdate)"
            onkeydown="if(event.keyCode==13){event.keyCode=0;event.returnValue=false;}">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="Abnormal-list">
      <el-table :data="RefundList" border style="width: 100%">
        <!-- <el-table-column label="全国订单数据" align='center'> -->
        <el-table-column label="申请退款日期" width="180" prop="applyTime" fixed>
        </el-table-column>
        <el-table-column label="渠道" width="120" prop='channelName' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="平台单号" width="180" prop="platformNo" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="后台单号" width="180" prop="xmbzNo" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="蛋糕款式" width="240" prop="goodsName" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="搭售退款说明" width="120" :show-overflow-tooltip="true">
          <template slot-scope="{row}">
            <span>已退{{ row.tyingProduct }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单金额" width="120" prop="totalPrice" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="退款金额" width="120" prop="refundMoney" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="多次退款详情" width="120" prop="refundDetail" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="是否制作" width="120" prop="isProduction" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="蛋糕去向" width="120" prop="cakeWhereabouts" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="退款原因" width="120" prop="applyReason" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="部门" width="120" prop="refundReason" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="退款类型" width="120" prop="refundType" :show-overflow-tooltip="true">
        </el-table-column>
        <!-- <el-table-column label="引申原因" width="120">
        </el-table-column> -->
        <el-table-column label="申请人" width="120" prop='refundApplyPeople' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="退款人" width="120" prop='refundPeople' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="退款时间" width="180" prop='refundTime' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="全额退款" width="120" prop='fullRefund' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="下单时间" width="120" prop='orderTime' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="状态" width="120" prop="approvalPass" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="城市" width="120" fixed="right" prop='deptName' :show-overflow-tooltip="true">
        </el-table-column>
        <!-- </el-table-column> -->
      </el-table>

    </div>

  </div>
</template>

<script>
  import {
    deptdepts,
    getChannelList
  } from "@/api/statistics";
  import {
    getExcelShowData
  } from "@/api/statistics"
  import {
    getToken
  } from '@/util/auth'
  export default {
    data() {
      return {
        Refundform: {
          excelType: 'REFUND', //订单统计
          deptIds: '',
          channelIds: '',
          // endTime: '',
          // startTime: '',
          startTime: this.dayjs(
              new Date()
            )
            .format("YYYY-MM-DD"),
          endTime: this.dayjs(
              new Date()
            )
            .format("YYYY-MM-DD"),
        },
        cityList: [], //城市
        channelList: [], //渠道
        RefundList: [ //退款订单数据
        ],
        deptIds: [],
        channelId: [],
        channelIdslist: [],
        deptIdsIdslist: [],
        Launchdate: [
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD")
          .toString(),
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD")
          .toString(),
        ],
      }
    },
    mounted() {
      this.getOrderList();
      window.addEventListener("keydown", this.keyupEnter);
    },
    destroyed() {
      window.removeEventListener("keydown", this.keyDown, false);
    },
    methods: {
      selectBlur(e) {
        if (e.keyCode == 13) {
          this.$refs['deptNameRef'].blur();
          this.$refs.channelIdRef.blur();
          e.returnValue = false;
        }
      },
      // 回车事件
      keyupEnter() {
        if (window.event.keyCode == 13) {
          this.handleFilter(this.Abnormalform, this.Launchdate); // 查询事件
        }
      },
      //如果页面有keep-alive缓存功能，这个函数会触发
      activated() {
        window.addEventListener("keydown", this.keyupEnter);
      },
      deactivated() {
        window.removeEventListener("keydown", this.keyupEnter);
      },
      citydataList() {
        deptdepts("").then(response => {
          this.cityList = response.data.data;
        });
      },
      getchannelIds(data) {
        this.channelIdslist = data;
      },
      getdeptIdsIds(data) {
        this.deptIdsIdslist = data;
      },
      getChannelList() {
        getChannelList().then(response => {
          this.channelList = response.data.data;
        })
      },
      getOrderList() {
        // 订单列表分页
        getExcelShowData(this.Refundform).then(response => {
          this.RefundList = response.data.data;
        });
      },
      handleFilter(Refundform, times) { //查询
       let {
         channelIds = '', deptIds = '',
       } = this.Refundform
       var fifterchannel = [];
       this.channelIdslist.map(item => {
         fifterchannel.push(item.value)
       })
       var fifdeptIds = [];
       this.deptIdsIdslist.map(item => {
         fifdeptIds.push(item.value)
       })
       Refundform.channelIds = fifterchannel.join(',');
       Refundform.deptIds = fifdeptIds.join(',');
        if (times) {
          this.Refundform.startTime = this.dayjs(
              times[0]
            )
            .format("YYYY-MM-DD")
            .toString();
          this.Refundform.endTime = this.dayjs(
              times[1]
            )
            .format("YYYY-MM-DD")
            .toString();
        }
        var time1 = Date.parse(this.Refundform.startTime);
        var time2 = Date.parse(this.Refundform.endTime);
        //讲两个时间相减，求出相隔的天数
        var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        if (dayCount > 30) {
          this.$message({
            showClose: true,
            message: "时间间隔不可超过31天",
            type: "warning"
          });
        } else {
          this.getOrderList();
        }

      },

      handleExport(Refundform, times) { //导出
        let {
          channelIds = '', deptIds = '',
        } = this.Refundform
        var fifterchannel = [];
        this.channelIdslist.map(item => {
          fifterchannel.push(item.value)
        })
        var fifdeptIds = [];
        this.deptIdsIdslist.map(item => {
          fifdeptIds.push(item.value)
        })
        Refundform.channelIds = fifterchannel.join(',');
        Refundform.deptIds = fifdeptIds.join(',');
        if (times) {
          this.Refundform.startTime = this.dayjs(
              times[0]
            )
            .format("YYYY-MM-DD")
            .toString();
          this.Refundform.endTime = this.dayjs(
              times[1]
            )
            .format("YYYY-MM-DD")
            .toString();
        }
        var time1 = Date.parse(this.Refundform.startTime);
        var time2 = Date.parse(this.Refundform.endTime);
        //讲两个时间相减，求出相隔的天数
        var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        if (dayCount > 30) {
          this.$message({
            showClose: true,
            message: "时间间隔不可超过31天",
            type: "warning"
          });
        } else {
          // const {
          //   user
          // } = this.$store.state
          var user = JSON.parse(localStorage.getItem('saber-userInfo'));
          window.open(
            `/api/xmbz-statistics/orderStatistics/downLoadExcel?excelType=REFUND&startTime=${this.Refundform.startTime}&endTime=${this.Refundform.endTime}&deptIds=${Refundform.deptIds}&channelIds=${Refundform.channelIds}&blade-auth=bearer ${user['content'].accessToken}`
          )
          // console.log(
          //   `/api/xmbz-statistics/orderStatistics/downLoadExcel?excelType=REFUND&startTime=${this.Refundform.startTime}&endTime=${this.Refundform.endTime}&deptIds=${Refundform.deptIds}&channelIds=${Refundform.channelIds}&blade-auth=bearer ${user.userInfo.accessToken}`
          // )
        }
      }
    }
  }
</script>

<style lang='scss' scoped>
  .Nationalorders {
    padding-top: 20px;
    border-top: 1px solid #ccc;

    .filter_container {
      display: flex;

      .el-form-item {
        margin-bottom: 22px !important;
      }
    }
  }
</style>
